<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">仓库库存占比</div>
    </div>
    <div v-if="tableDate&&tableDate.length>0" id="WarehouseInventoryProportion" ref="echartsRef" class="echarts_div" />
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { warehouseInventoryProportion } from '@/api/warehouseManagement/warehouseSignage'

import Big from 'big.js' // big.js解决精度丢失问题
import { mapGetters } from 'vuex'
export default {
  name: 'LocationDistribution',
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart) {
        this.$nextTick(() => {
          this.drawLine()
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      tableDate: ['1'],
      myChart: undefined,
      timer: undefined,
      allNumber: 0,
      count: 0
    }
  },
  mounted() {
    this.resetScale() // 重置缩放
    // this.drawLine()
    this.getList()
    this.timer = setInterval(() => {
      this.getList()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  methods: {

    resetScale() {
      const scaleX = this.$refs.echartsRef.clientWidth / 797
      const scaleY = this.$refs.echartsRef.clientHeight / 250
      this.$refs.echartsRef.style.transform = 'scale(' + Math.min(scaleX, scaleY) + ')'
      this.$refs.echartsRef.style.transformOrigin = 'left'
      this.$refs.echartsRef.style.marginRight = -(797 * (1 - Math.min(scaleX, scaleY))) + 'px'
    },
    getList() {
      warehouseInventoryProportion().then(res => {
        this.tableDate = res.data
        this.count = res.count
        if (this.tableDate.length > 0) {
          this.$nextTick(() => {
            this.drawLine()
          })
        }
      })
    },
    sum(arr) {
      return arr.reduce(function(prev, curr) {
        return new Big(prev).plus(curr).toString()
      })
    },

    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('WarehouseInventoryProportion')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('WarehouseInventoryProportion'))
      const arr = []
      const nameArray = []
      this.tableDate.forEach(item => {
        arr.push({
          value: item.per,
          name: item.warehouseName + ',' + item.stockNum
        })
        nameArray.push(item.location)
      })
      this.myChart.setOption({
        // 右边信息面板
        legend: {
          orient: 'vertical',
          right: '20',
          top: 'middle',
          itemHeight: 15,
          itemWidth: 40,
          itemGap: 20,
          formatter: name => {
            let params1 = name.split(',')[0]
            if (params1.length > 7) {
              params1 = params1.substr(0, 6) + '...'
            }
            const params2 = name.split(',')[1]
            const arr = [
              '{a|' + params1 + '}',
              '{b|' + params2 + '}'
            ]
            return arr.join('')
          },
          textStyle: {
            rich: {
              a: {
                color: '#000000',
                fontSize: 18,
                width: 50,
                padding: [0, 15]
              },
              b: {
                align: 'right',
                fontSize: 18,
                width: 180
              }
            }
          }
        },
        color: ['#6CF72D', '#FFCC00', '#FF8385', '#5AD1FF', '#9C74FF'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['48%', '55%'],
            center: ['30%', '50%'],
            silent: true,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 3
            },
            // avoidLabelOverlap: true,
            label: {
              // padding: [0, -20],
              formatter: function(e) {
                const {
                  data: { name, value }
                } = e
                const params1 = name.split(',')[0]
                if (params1.length > 7 && params1.slice(0, 6) != params1) {
                  return `{a|${params1.slice(0, 6)}...  }{a|${value}%}\n\n`
                } else {
                  return `{a|${params1}  }{a|${value}%}\n\n`
                }
              },
              rich: {
                a: { fontSize: 14, color: '#000000' }
              }
            },
            labelLine: {
              show: true, // 数据标签引导线
              // 牵引线长度
              length: 10,
              length2: 50,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#D8D8D8'
                // padding: [0,50]
              }
            },
            data: arr
          },
          {
            name: '仓库物料合计',
            type: 'pie',
            radius: ['0%', '0%'],
            center: ['30%', '50%'],
            itemStyle: {
              color: 'transparent'
            },
            label: {
              position: 'inside',
              formatter: `{data|{c}}\n{serie|{a}}`,
              rich: {
                data: {
                  fontWeight: '400',
                  fontSize: 24,
                  color: `#504F4F`,
                  lineHeight: 36,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0
                },
                serie: {
                  fontSize: 16,
                  color: `#504F4F`,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0
                }
              }
            },
            labelLine: {
              show: false
            },
            data: [this.count]
          }
        ]
      })
    }
    // drawLine() {
    //   if (this.myChart) {
    //     this.$echarts.init(document.getElementById('main')).dispose()
    //   }
    //   this.myChart = this.$echarts.init(document.getElementById('main'))
    //   const arr = []
    //   const nameArray = []
    //   this.tableDate.forEach(item => {
    //     arr.push({
    //       value: item.per,
    //       name: item.warehouseName + ',' + item.stockNum
    //     })
    //     nameArray.push(item.location)
    //   })
    //   this.myChart.setOption({
    //     tooltip: {
    //       trigger: 'item'
    //     },
    //     title: {
    //       left: '30%',
    //       top: '35%',
    //       subtext: `{a|${this.alarmCount}}\n{b|告警总数}`,
    //       subtextStyle: {
    //         fontSize: 14,
    //         color: '#333',
    //         rich: {
    //           a: {
    //             fontSize: 14,
    //             fontWeight: 700,
    //             color: '#305A5F',
    //             align: 'center',
    //             lineHeight: 20
    //           },
    //           b: {
    //             fontSize: 14,
    //             fontWeight: 700,
    //             color: 'rgba(0,0,0,0.65)',
    //             align: 'center',
    //             lineHeight: 20
    //           }
    //         }
    //       }
    //     },
    //     // 右边信息面板
    //     legend: {
    //       orient: 'vertical',
    //       right: '4%',
    //       top: 'middle',
    //       itemHeight: 14,
    //       itemWidth: 27,
    //       itemGap: 20,
    //       formatter: name => {
    //         console.log(1122313212, name)
    //         let params1 = name.split(',')[0]
    //         if (params1.length > 7) {
    //           params1 = params1.substr(0, 6) + '...'
    //         }
    //         const params2 = name.split(',')[1]
    //         const arr = [
    //           '{a|' + params1 + '}',
    //           '{b|' + params2 + '}'
    //         ]
    //         return arr.join('')
    //       },
    //       textStyle: {
    //         rich: {
    //           a: {
    //             color: '#000000',
    //             fontSize: 16,
    //             padding: [0, 20],
    //             width: 50
    //           },
    //           b: {
    //             align: 'right',
    //             fontSize: 18,
    //             width: 150
    //           }
    //         }
    //       }
    //     },
    //     // 设置饼状图每个颜色块的颜色
    //     color: ['#6CF72D', '#FFCC00', '#FF8385', '#5AD1FF', '#9C74FF', '#000000'],
    //     // 牵引线
    //     series: [
    //       {
    //         type: 'pie',
    //         radius: ['44%', '55%'],
    //         center: ['35%', '45%'],
    //         avoidLabelOverlap: true,
    //         silent: true,
    //         itemStyle: {
    //           borderRadius: 6,
    //           borderColor: '#fff',
    //           borderWidth: 3
    //         },
    //         label: {
    //           padding: [0, -130],
    //           formatter: function(e) {
    //             const {
    //               data: { name, value }
    //             } = e
    //             const params1 = name.split(',')[0]
    //             if (params1.length > 7 && params1.slice(0, 6) != params1) {
    //               return `{a|${params1.slice(0, 6)}...  }{a|${value}%}\n\n`
    //             } else {
    //               return `{a|${params1}  }{a|${value}%}\n\n`
    //             }
    //           },
    //           rich: {
    //             a: { fontSize: 14, color: '#000000' }
    //           }
    //         },
    //         // emphasis: {
    //         //   label: {
    //         //     show: true,
    //         //     fontSize: '40',
    //         //     fontWeight: 'bold'
    //         //   }
    //         // },
    //         labelLine: {
    //           show: true, // 数据标签引导线
    //           // 牵引线长度
    //           length: 25,
    //           length2: 180,
    //           lineStyle: {
    //             width: 1,
    //             type: 'solid',
    //             color: '#D8D8D8'
    //           }
    //         },
    //         data: arr
    //       }
    //     ]
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: 100%;
}

.emergency_top {
  display: flex;
  justify-content: space-between;
  height: 50px;

  .emergency_title {
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      letter-spacing: -0.21px;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
      width: 100%;
  }
}
.echarts_div{
  height: calc(100% - 50px);
  padding: 20px 0 20px 10px;
}

</style>
